<template>
  <div class="topbox">
    <div class="addtopbox">
      <h1 class="addVolunTitle">发布宠物领养</h1>
      <el-form
          label-position="right"
          label-width="100px"
          :model="pet"
          style="max-width: 460px"
          :rules="petRules"
          ref="petRef"
      >
        <el-form-item label="标题" prop="ptitle">
          <el-input v-model="pet.ptitle" placeholder="大标题"/>
        </el-form-item>
        <el-form-item label="副标题" prop="psubhead">
          <el-input v-model="pet.psubhead" placeholder="小标题"/>
        </el-form-item>
        <el-form-item label="详细信息" prop="pdetail">
          <el-button @click="this.dialogVisible = true;this.tempVdetail = pet.pdetail">点击编辑</el-button>

          <!--
                    <QuillComp @update="getDetail" style="width: 90%;height: 300px"></QuillComp>
                    <svg style="margin:0 0 auto 5px"
                         t="1691805526589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                         p-id="4010" width="300" height="300"
                         @click="this.dialogVisible = true;this.tempVdetail = pet.pdetail"
                    >
                      <path
                          d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z"
                          fill="#8a8a8a" p-id="4011"></path>
                    </svg>-->

          <!--          <el-input type="textarea" :rows="5" v-model="pet.pdetail" placeholder="详细信息"/>-->
        </el-form-item>
        <el-form-item label="联系人" prop="pname">
          <el-input v-model="pet.pname" placeholder="联系人姓名"/>
        </el-form-item>
        <el-form-item label="手机号" prop="piphone">
          <el-input v-model="pet.piphone" placeholder="联系人手机号"/>
        </el-form-item>
        <el-form-item label="上传图片" prop="pimg">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8081/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="pet.pimg" :src="pet.pimg" class="avatar"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </el-form-item>
        <div class="button">
          <el-button @click="subPet()">提交</el-button>
          <el-button @click="reset()">重置</el-button>
        </div>

      </el-form>
    </div>
  </div>
  <!--文本输入框-->
  <el-dialog
      v-model="dialogVisible"
      title="输入内容"
      width="80%"
  >
    <QuillComp @update="getDetail" style="width: 100%;height: 500px"></QuillComp>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false;this.pet.pdetail = tempVdetail">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import doThis from "@/api/getData";
import QuillComp from "@/util/QuillComp.vue";
import {ElMessage} from "element-plus";

export default {
  name: "AddPet",
  components: {
    QuillComp
  },
  data() {
    return {
      dialogVisible: false,
      tempVdetail: '',
      pet: {
        ptitle: '',
        psubhead: '',
        pdetail: '',
        pimg: '',
        pname: '',
        piphone: '',
      },
      petRules: {
        ptitle: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {max: 8, message: '长度必须小于8个字符', trigger: 'blur'},
        ],
        psubhead: [
          {required: true, message: '请输入副标题', trigger: 'blur'},
          {max: 12, message: '长度必须小于12个字符', trigger: 'blur'},
        ],
        pdetail: [
          {required: true, message: '请输入详细信息', trigger: 'blur'},
        ],
        pimg: [
          {required: true, message: '请上传封面图片', trigger: 'blur'},
        ],
        pname: [
          {required: true, message: '请输选联系人姓名', trigger: 'blur'},
          {max: 8, message: '长度必须小于8个字符', trigger: 'blur'},
        ],
        piphone: [
          {
            min: 11, max: 11, message: '输入正确的手机号', trigger: 'blur',
            pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
          },
        ]
      }
    }
  },
  methods: {
    handleAvatarSuccess(e) {
      this.pet.pimg = e.data.url
    },
    reset() {
      this.pet = {
        ptitle: '',
        psubhead: '',
        pdetail: '',
        pimg: '',
        pname: '',
        piphone: '',
      }
    },
    subPet() {
      this.$checkLogin()
      this.$refs['petRef'].validate((res) => {
        if (res) {
          /*          pet: {
                      ptitle: '',
                          psubhead: '',
                          pdetail: '',
                          pimg: '',
                          pname: '',
                          piphone: '',
                    },*/
          let data = new FormData()
          data.set("ptitle", this.pet.ptitle)
          data.set("psubhead", this.pet.psubhead)
          data.set("pdetail", this.pet.pdetail)
          data.set("pimg", this.pet.pimg)
          data.set("pname", this.pet.pname)
          data.set("piphone", this.pet.piphone)
          doThis.doPost("/pet/add", data).then(res => {
/*            alert(res.msg)
            if (res.code === '0') {

            }*/
            if (res.code === "0") {
              ElMessage({
                message: res.msg,
                type: 'success',
              })
              this.reset()
            }else {
              ElMessage.error(res.msg)
            }
          })
        }

      })
    },
    getDetail(e) {
      this.tempVdetail = e
      console.log(e)
    },

  }
}
</script>

<style scoped>

.addtopbox {
  background: #ffff;
  width: 600px;
  margin: 0 auto;
}

.button {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  border: 1px dashed var(--el-border-color);
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
}

.drawStation #draw-station-container {
  padding: 0;
  /* margin: 20px 0 20px 0; */
  margin: 50px auto;
  width: 500px;
  height: 300px;
}

.detailstate {
  font-size: 16px;
  height: 10px;
}

.topbox {
  background: #ffff;
  margin: 0 auto;
  width: 1200px;
  padding: 40px;
}

.addVolunTitle {
  margin-bottom: 25px;
  text-align: center;
}
</style>